<template>
    <div class="login clearfix">
      <div class="login-wrap">
        <el-row type="flex" justify="center">
          <el-form ref="loginForm" :model="loginFrom" status-icon label-width="80px">
            <h3>登录</h3>
            <hr>
            <el-form-item prop="username" label="用户名">
              <el-input v-model="loginFrom.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            
            <el-form-item prop="password" label="密码">
              <el-input v-model="loginFrom.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item class="btn">
                <el-button type="primary" size="mini"  @click="login">登录</el-button>
                <el-button type="info" size="mini"   @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
  </template>
   
   <script>
import * as auth from "@/utils/auth";
import { login } from "@/api/user";

export default {
  name: "Login2",
  data() {
    return {
      loginFrom: {
        username: "xmj",
        password: "xmj123",
      },
      LoginfromRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      let _this = this;
      login(_this.loginFrom).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            return _this.$message({ type: "warning", message: res.msg });
          }
          _this.$store.commit("info", res.data.user);
          auth.setToken(res.data.token);
          _this.$router.push("/");
        },
        err => {
          _this.$message({ message: err.message, type: "error" });
        }
      );
    },
    register() {
      this.$router.push("/register");
    },
  },
};
</script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.login {
  width: 100%;
  height: 740px;

  background-size: cover;
  overflow: hidden;
}
.login-wrap {
  background: white;
  background-size: cover;
  width: 400px;
  height: 300px;
  border-radius: 20px;
  padding: 2px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}

h3 {
  margin-top: 20px;

  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}

.el-button {
  width: 80%;
  margin-left: -50px;
}

.btn {
  height: 50px;
  width: 320px;
  display: inline-block;
}
.btn .el-button {
  width: 110px;
  height: 35px;
  margin: 5px;
}
</style>